<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡改造(改为面向对象)</title>
		<style type="text/css">
			#div1 button{
				width: 100px; height: 30px;
				background-color: gray; color: white;
				font-size: 18px;
			}
			#div1 .active{
				background-color: orange; color: blue;
			}
			#div1 div{
				width: 340px; height: 300px;
				border: 1px solid black;
				display: none;
			}
		</style>
		
		<script type="text/javascript">
			function tabSwitch(id){
				//获取di为div1的元素节点
				var node = document.getElementById("div1");
				
				//通过div1节点获取div1内部的button和div元素节点伪数组
				this.oBtn = node.getElementsByTagName("button");
				this.oDiv = node.getElementsByTagName("div");
				
				//用个变量去记录this指向
				var _this = this;
				
				//给按键添加点击事件
				for(var i=0; i<this.oBtn.length; i++){
					this.oBtn[i].index = i;
					this.oBtn[i].onclick = function(){
						//注意，这里的this指向已经改变
						_this.Tab(this);
					}
				}
			}
			
			tabSwitch.prototype.Tab = function(oBtn){
				// 清除所有按键上的class属性
				// 所有显示文字的div中的style.display赋值为"none"
				for(var i=0; i<this.oBtn.length; i++){
					this.oBtn[i].className = "";
					this.oDiv[i].style.display = "none";
				}
				
				// 把当前点击的button的class属性赋值"active"
				// 把当前点击的div的style.display赋值为"block"
				oBtn.className = "active";
				this.oDiv[oBtn.index].style.display = "block";
			}
			
			window.onload = function(){
				new tabSwitch("div1");
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<button class="active">HTML5</button>
			<button>Python</button>
			<button>Java</button>
			<div style="display: block">HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然在技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性网站开发技术人员是必须要有所了解的</div>
			<div>Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</div>
			<div>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</div>
		</div>
	</body>
</html>
